<template>
    <div>
        <HeaderTop :title="'个人信息'"></HeaderTop>
        <div class="content">
            <section class="profile_number">
                <router-link :to='userInfo._id? "/userinfo":"/login"' tag="div">
                    <div class="person">
                        <span class="iconfont icon-wodeqianfenleishouye"></span>
                    </div>
                    <div class="login_right">
                        <span class="iconfont icon--you"></span>
                    </div>
                    <div class="login">
                        <div class="font" v-if="!userInfo.phone">{{userInfo.name||'注册|登录'}}</div>
                        <div class="font_num">{{userInfo.phone || '暂时无绑定手机号'}}</div>
                    </div>
                </router-link>
            </section>
            <section class="profile_info_data">
                <div class="profile_info">
                    <div> <span class="profile_info_font">0.00</span> <span>元</span> </div>
                    <span>  我的余额  </span>
                </div>
                <div class="profile_info border-left-1px">
                    <div> <span class="profile_info_font">0</span> <span>个</span> </div>
                    <span>  我的优惠  </span>
                </div>
                <div class="profile_info border-left-1px">
                    <div> <span class="profile_info_font">0</span> <span>分</span> </div>
                    <span>  我的积分  </span>
                </div>

            </section>
            <section class="profile_order">
                <div class="order_left">
                    <div class="iconfont icon--caidan"></div>
                </div>
                <div class="order_right">
                    <div class="iconfont icon--you"></div>
                </div>
                <div class="order_title">
                    我的订单
                </div>
            </section>
            <section class="profile_order">
                <div class="order_left">
                    <div class="iconfont icon--huiyuan" style="color:orangered"></div>
                </div>
                <div class="order_right">
                    <div class="iconfont icon--you"></div>
                </div>
                <div class="order_title">
                    积分商城
                </div>
            </section>
            <section class="profile_order">
                <div class="order_left">
                    <div class="iconfont icon--diannao" style="color:brown"></div>
                </div>
                <div class="order_right">
                    <div class="iconfont icon--you" ></div>
                </div>
                <div class="order_title">
                    硅谷外卖会员卡
                </div>
            </section>
            <section class="profile_order" style="margin-top:10px">
                <div class="order_left">
                    <div class="iconfont icon-paihangbang" style="color:green"></div>
                </div>
                <div class="order_right">
                    <div class="iconfont icon--you"></div>
                </div>
                <div class="order_title">
                    服务中心
                </div>
            </section>

            <section class="profile_order">
                <!--<button class="order_out">退出登录</button>-->
                    <mt-button class="order_out" style="width:100%" v-if="userInfo._id" @click="logout">退出登录</mt-button>
            </section>
        </div>

    </div>
</template>

<script>
    import HeaderTop from '../../components/HeaderTop/HeaderTop';
    import {mapState} from 'vuex'
    import {MessageBox,Toast} from 'mint-ui'
    export default {
        name: "Profile",
        methods:{
            logout(){
                // MessageBox({
                //     title: '提示',
                //     message: '确定执行此操作?',
                //     showCancelButton: true
                // });
                MessageBox.confirm("小可爱，确定离开吗").then(action=>{
                    console.log("messagebox生效");
                    this.$store.dispatch('resetUserInfo');
                    Toast("退出成功")
                },action=>{console.log("取消了退出操作")})

            }
        },
        computed:{
            ...mapState(['userInfo'])
        },
        components:{
            HeaderTop
        }

    }
</script>

<style lang="stylus" scoped>
    @import '../../assets/mixin.styl'
.content
    margin-top:1rem
    //position:fixed
    width:100%
    //height:10rem
    background:#f5f5f5
    overflow:auto
    .profile_number
        top-border-1px(#fff)
        height:1.6rem
        background:green
        color:#fff
        .person
            width:2rem
            height:1.6rem
            float:left
            //background:#fff
            line-height:1.6rem
            text-align:center
            span
                font-size:1rem
        .login
            height:1.6rem
            padding-left:2rem
            //background:yellow
            .font
                font-size:0.3rem
                height:0.8rem
                line-height:0.8rem
            .font_num
                font-size:0.2rem
                height:0.8rem
                line-height:0.8rem
        .login_right
            float:right
            //background:blue
            height:1.6rem
            width:1rem
            text-align:center
            span
                line-height:1.6rem
                font-size:0.4rem

    .profile_info_data
        display:flex
        height:1.4rem
        background:#fff
        padding-top:0.2rem
        margin-bottom:0.2rem
        .profile_info
            //background:#cccccc
            flex:1
            height:1.4rem
            font-size:0.3rem
            text-align:center
            line-height:0.7rem
            .profile_info_font
                font-size:0.5rem
                color:#e38d13
        .border-left-1px
            border-left:1px solid #ccc
    .profile_order
        //height:1rem
        background:#fff
        .order_left
            height:1rem
            width:0.8rem
            float:left
            //background:#a71d5d
            .iconfont
                color:#0ff111
                line-height:1rem
                font-size:0.3rem
                text-align:center
        .order_right
            height:1rem
            width:1rem
            float:right
            //background:rgba(22,22,22,0.2)
            .iconfont
                line-height:1rem
                font-size:0.3rem
                text-align:center
        .order_title
            padding:0 0.8rem
            height:1rem
            //background:red
            line-height:1rem
            font-size:0.3rem
        .order_out
            display:block

            height:1rem
            //widht:7rem 无效？
            //padding:0 3rem
            font-size:0.3rem
            margin:100px auto
            background:#ff0000
            border-radius:0.3rem
</style>
